import { Button, Form, Input } from "antd";
import { useNavigate } from "react-router-dom";
// import { useStore } from "@/bootstrap/useStore/index";
import {useStore} from '../../bootstrap/useStore/index'
enum SecurityType{
    "FORGET" = "忘记密码",
    "REGISTER" = "注册账号"
}
interface IProps {
    type: SecurityType
}
const Security = (props: IProps) => {
    const {authStore} = useStore();
    const navigate = useNavigate();
    const [form] = Form.useForm();
    const onChangeCode = (e:any) =>{
        form.setFieldValue("code",e.target.value);
    }
    const handlerLogin = () => {
        navigate('/login')
    }
    const authCode = () =>{        
        authStore.AuthCode(form.getFieldValue("email"))
    }
    const onConfirm = () =>{
        if(props.type==='注册账号') return authStore.AuthRegister(form.getFieldsValue());
    }
    return (
        <div className="register">
            <div className="register-container">
                <div className="container-header">
                    <div className="header-company">
                        smile
                    </div>
                    <div className="header-login">
                        <span>已有账号,</span>
                        <span className="login-text" onClick={handlerLogin}>马上登录</span>
                    </div>
                </div>
                <div className="container-content">
                    <div className="content-header">
                        <span>入狱指南</span>
                    </div>
                    <div className="content-wrapper">
                        <div className="content-title">{props.type}</div>
                        <div className="content-form">
                            <Form form={form}>
                                <Form.Item name="username">
                                    <Input className="form-username" placeholder="账号" />
                                </Form.Item>
                                <Form.Item name="email">
                                    <Input className="form-username" placeholder="邮箱" />
                                </Form.Item>
                                <Form.Item name="code">
                                    <Input.Group compact>
                                        <Input onChange={onChangeCode} className="form-code" placeholder="验证码" />
                                        <Button className="form-send" type="primary" onClick={authCode}>获取验证码</Button>
                                    </Input.Group>
                                </Form.Item>
                                <Form.Item name="password">
                                    <Input type="password" className="form-password" placeholder="密码" />
                                </Form.Item>
                                <Form.Item>
                                    <Button className="form-submit" type="primary" onClick={onConfirm}>提交</Button>
                                </Form.Item>
                            </Form>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    )
}
export default Security;
export {SecurityType}